Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
search
body { background-image: linear-gradient(to right , #cb2d3e , #ef473a); } .searchBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%,50%); background: #2f3640; height: 40px; border-radius: 40px; padding: 10px; } .searchBox:hover > .searchInput { width: 240px; padding: 0 6px; } .searchBox:hover > .searchButton { background: white; color : #2f3640; } .searchButton { color: white; float: right; width: 40px; height: 40px; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 0.4s; } .searchInput { border:none; background: none; outline:none; float:left; padding: 0; color: white; font-size: 16px; transition: 0.4s; line-height: 40px; width: 0px; } @media screen and (max-width: 620px) { .searchBox:hover > .searchInput { width: 150px; padding: 0 6px; } }